<script setup lang="ts">
import { computed } from "vue";

type Prop = {
  title?: string;
  description?: string;
  checkedObj?: any;
};

const props = defineProps<Prop>();
const emit = defineEmits(["change"]);

const handleChange = (val: boolean) => {
  emit("change", val);
};

const checked = computed({
  get: () => {
    return !!props.checkedObj;
  },
  set: val => {
    handleChange(val);
  }
});
</script>

<template>
  <div class="check-row-wrapper">
    <div class="flex gap-4">
      <el-checkbox v-model="checked" />
      <div class="flex flex-col gap-1">
        <span>{{ props.title }}</span>
        <span>{{ props.description }}</span>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.check-row-wrapper {
  width: 100%;
}
</style>
